<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<title>满减专区</title>
</head>
<body>
	<!-- 顶部tab -->
	<div th:replace="fragments/common::top-tab"></div>
	<!-- 搜索栏 -->
	<div th:replace="fragments/common::search-bar"></div>
	<!-- 内页导航栏 -->
	<div class="top-nav bg3">
		<div class="nav-box inner">
			<div class="all-cat">
				<div class="title"></div>
			</div>
			<ul class="nva-list">
				<a th:href="@{/}"><li >首页</li></a>
				<a th:href="@{/getHotZone}"><li>热卖专区</li></a>
				<a th:href="@{/getFullReductionZone}" ><li class="active">满减专区</li></a>
				<a th:href="@{/getDiscountZone}"><li>折扣专区</li></a>
			</ul>
		</div>
	</div>
	<div class="content inner">
		<section class="filter-section clearfix">
			<ol class="breadcrumb">
				<li><a th:href="@{/}">首页</a></li>
				<li class="active" >满减专区</li>
			</ol>
			<div class="filter-box">
				<div class="all-filter">
					<div class="filter-value">
						<a href="" class="sale-title active">满减专区</a>
					</div>
				</div>
			</div>
			<div class="sort-box bgf5">
				<div class="sort-text">排序：</div>
				<a class="link" id="sort_down"><div class="sort-text">价格 <i class="iconfont icon-sortDown"></i></div></a>
				<a class="link" id="sort_up"><div class="sort-text">价格 <i class="iconfont icon-sortUp"></i></div></a>
				<div class="sort-total pull-right" th:text="|共${list.size()}个商品|"></div>
			</div>
		</section>
		<section class="item-show__div clearfix">
			<div class="pull-left">
				<div class="item-list__area clearfix">
					<div class="item-card" th:each="product:${list}" th:attr="data-price=${product.getPrice()}">
						<a th:href="@{/product/getProductDetailPage(id=${product.id})}" class="photo">
							<img th:src="${product.getMainImage()}" th:alt="${product.name}" class="cover">
							<div class="name" th:text="${product.name}"></div></a>
						<div class="middle">
							<div class="price" th:utext="'<small>￥</small>'+${product.getPrice()}"></div>
						</div>
						<div class="buttom">
							<div>销量 <b><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
								<path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"/>
							</svg></b></div>
							<div>人气 <b><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
								<path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"/>
							</svg></b></div>
<!--							<div>评论 <b>1688</b></div>-->
						</div>
					</div>
				</div>
				<!-- 分页 -->
				<div class="page text-right clearfix">
				</div>
			</div>
			<div class="pull-right">
				
				<div class="desc-segments__content">
					<div class="lace-title">
						<span class="c6">爆款推荐</span>
					</div>
					<div class="picked-box">
						<a th:each="recommend:${recommends}" th:href="@{/product/getProductDetailPage(id=${recommend.id})}" class="picked-item"><img th:src="${recommend.getMainImage()}" th:alt="${recommend.name}" class="cover"><span class="look_price" th:text="'￥'+${recommend.getPrice()}"></span></a>

					</div>
				</div>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div th:replace="fragments/common::right-menu"></div>
	<!-- 底部信息 -->
	<div th:replace="fragments/common::bottom-bar"></div>
</body>
<script th:inline="javascript">
	var x=20;
	//分页!
	{
		var itemcount=0;
		$("div.item-card").each(function(innerIndex, innerElement) {
			itemcount=itemcount+1;
			// 设置自定义属性 index
			$(innerElement).attr("data-index", innerIndex+1);
			if(innerIndex>=x){
				$(innerElement).css("display",'none')
			}

		});
		var page_div=$("div.page.text-right");
		page_div.attr("data-total",itemcount);
		page_div.attr("data-cur-page",1);
		var pageCount= Math.ceil(itemcount / x);
		page_div.attr("data-pagenum",pageCount);
		if(pageCount!=0){
			var lastP = $("<a  class='toLastPage link disabled'>上一页</a>");
			var nextP = $("<a class='toNextPage link disabled'>下一页</a>");
			if(pageCount>1){
				nextP = $("<a class='toNextPage link'>下一页</a>");
			}
			$(page_div).append(lastP);
			for (var i = 1; i <= pageCount; i++) {
				if(i==1){
					$(page_div).append($("<a class='pageBtn link select' data-p="+i+">"+i+"</a>"));
				}else{
					$(page_div).append($("<a class='pageBtn link' data-p="+i+">"+i+"</a>"));
				}
			}
			$(page_div).append(nextP);
		}
	};
	//点击页码
	$('.pageBtn').click(function (){
		var thisPage=$(this).data('p')
		$(this).siblings('a.pageBtn').each(function (){
			$(this).removeClass('select');
		})
		$(this).addClass('select');
		//遍历order
		var parent_div=$(this).parents('div.page');
		var order_table=parent_div.siblings('div.item-list__area');//
		//设置parent_div属性
		parent_div.attr("data-cur-page",thisPage);
		var total=parent_div.data('pagenum');
		var lastBtn=$(this).siblings('.toLastPage')
		var nextBtn=$(this).siblings('.toNextPage')
		// console.log(thisPage)
		// console.log(total)
		if(thisPage==1 && total!=1){
			lastBtn.addClass('disabled');
			lastBtn.removeClass('link');
			nextBtn.removeClass('disabled');
			nextBtn.addClass("link");
		}
		if(thisPage==total && total!=1){
			lastBtn.removeClass('disabled');
			lastBtn.addClass("link");
			nextBtn.addClass('disabled');
			nextBtn.removeClass('link');
		}
		//
		order_table.find("div.item-card").each(function(innerIndex, innerElement) {
			var elePage=$(innerElement).data('index');
			//console.log(elePage);
			var a=x*(thisPage-1)+1
			var b=x*(thisPage-1)+x
			if(elePage>=a && elePage<=b){
				$(innerElement).css('display','');
			}else {
				$(innerElement).css('display','none');
			}
		});
		$('.link').css("cursor", "pointer");
	})
	//上一页
	$('.toLastPage').click(function (){
		var parent_div=$(this).parents('div.page');
		var thisPage=parent_div.data('curPage')-1;
		if(thisPage<1){
			thisPage=1;
		}
		$(this).siblings('a.pageBtn').each(function (){
			if($(this).data('p')==thisPage){
				$(this).click();
			}
		})
	})
	//下一页
	$('.toNextPage').click(function (){
		var parent_div=$(this).parents('div.page');
		var thisPage=parent_div.data('curPage')+1;
		if(thisPage>parent_div.data('total')){
			thisPage=parent_div.data('total');
		}
		$(this).siblings('a.pageBtn').each(function (){
			if($(this).data('p')==thisPage){
				$(this).click();
			}
		})
	})
	$('.link').css("cursor", "pointer");
	$('#sort_up').click(function (){
		sortUp();
	})
	$('#sort_down').click(function (){
		sortDown();
	})
	function sortUp(){
		//父标签
		const container = document.querySelector('.item-list__area');
		const items = Array.from(container.querySelectorAll('.item-card'));
		items.sort((a, b) => {
			const priceA = parseInt(a.getAttribute('data-price'));
			const priceB = parseInt(b.getAttribute('data-price'));
			return priceA - priceB;
		});

		// Clear the container
		container.innerHTML = '';

		// Append sorted items back to the container
		items.forEach(item => {
			console.log('xx')
			container.appendChild(item);
		});
	}
	function sortDown(){
		//父标签
		const container = document.querySelector('.item-list__area');
		const items = Array.from(container.querySelectorAll('.item-card'));

		items.sort((a, b) => {
			const priceA = parseInt(a.getAttribute('data-price'));
			const priceB = parseInt(b.getAttribute('data-price'));
			return priceB - priceA;
		});

		// Clear the container
		container.innerHTML = '';

		// Append sorted items back to the container
		items.forEach(item => {
			container.appendChild(item);
		});
	}
</script>
</html>